<template>
  <!-- 统计图表 -->
  <div ref="myChart" id="myChart" style="height:300px"></div>

</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => { }
    },
    obj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  computed: {},
  watch: {
    datas: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  mounted() {
    const that = this;
    that.init();
    window.onresize = () => {
      that.myChart.resize();
    }

  },
  methods: {
    init() {
      const option = {
        radar: {
          // shape: 'circle',
          axisName: {
            color: '#000'
          },
          indicator: [
            { name: '内容', max: 6500 },
            { name: '规模', max: 16000 },
            { name: '价值', max: 38000 },
            { name: '合规', max: 30000 },
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000,],
                name: 'Allocated Budget',
                itemStyle:{
                  color:'#5087EC'
                },
                 lineStyle: {
                  color: '#5087EC'
                },
              },
              {
                value: [5000, 14000, 28000, 26000,],
                name: 'Actual Spending',
                itemStyle:{
                  color:'#68BBC4'
                },
                 lineStyle: {
                  color: '#68BBC4'
                },
              },
              {
                value: [3200, 13000, 7000, 15000,],
                name: 'Allocated Budget',
                itemStyle:{
                  color:'#EFF0F2'
                },
                 lineStyle: {
                  color: '#EFF0F2'
                },
              },
              {
                value: [5000, 14000, 18000, 16000],
                name: 'Actual Spending',
                itemStyle:{
                  color:'#F2BD42'
                },
                 lineStyle: {
                  color: '#F2BD42'
                },
              },
              {
                value: [5000, 14000, 18000, 16000],
                name: 'Actual Spending',
                itemStyle:{
                  color:'#EE752F'
                },
                 lineStyle: {
                  color: '#EE752F'
                },
              }
            ]
          }
        ]
      };
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart);
      }
      // 绘制图表
      this.myChart.setOption(option)
    }

  }
};
</script>
<style lang="sess" scoped>
</style>